<template>
  <el-descriptions
    class="margin-top"
    :column="2"
    border
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">服务名称</div>
      </template>
      {{ name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">操作</div>
      </template>
      <el-button type="primary" plain>{{ change_btn }}</el-button>
      <el-button type="primary" plain>{{ delete_btn }}</el-button>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">描述</div>
      </template>
      {{ description }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">

const props = defineProps({
  idx: {
    type: Number,
    default: 0,
    required: true
  },
  name: {
    type: String,
    default: 'service name',
    required: true
  },
  description: {
    type: String,
    default: 'service description',
    required: true
  },
  change_btn: {
    type: String,
    default: '修改'
  },
  delete_btn: {
    type: String,
    default: '删除'
  }
});

</script>
